<template>
  <ul class="menu-container">
    <li v-for="(menuItem, index) in menuList" :key="index" @click="handleClick(menuItem.name)">
      {{ menuItem.label }}
      <ul v-if="menuItem.children">
        <li v-for="(subMenuItem, subIndex) in menuItem.children" :key="subIndex" @click="handleClick(subMenuItem.name)">
          {{ subMenuItem.label }}
        </li>
      </ul>
    </li>
  </ul>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

// 定义菜单数据结构
const menuList = [
  {
    name: '首页',
    label: '首页'
  },
  {
    name: '物流运输编辑模块',
    label: '物流运输编辑模块'
  },
  {
    name: '审批规则应用',
    label: '审批规则应用',
    children: [
      {
        name: '票据合法性自动校验',
        label: '票据合法性自动校验'
      },
      {
        name: '金额准确性校验',
        label: '金额准确性校验'
      },
      {
        name: '物流运输编辑内容审查',
        label: '物流运输编辑内容审查'
      },
      {
        name: '业务合规性审查',
        label: '业务合规性审查'
      },
      {
        name: '已审批任务查看',
        label: '已审批任务查看'
      },
      {
        name: '审批结果待办生成',
        label: '审批结果待办生成'
      }
    ]
  },
  {
    name: '费用报销模块',
    label: '费用报销模块',
     children: [
       {
        name: '费用报销办理',
        label: '费用报销办理'
      },
      {
        name: '审批操作',
        label: '审批操作'
      },
      {
        name: '审批记录查看',
        label: '审批记录查看'
      }
    ]
  },
  {
    name: '个人基本信息',
    label: '个人基本信息'
  }
];

const handleClick = (item) => {
  console.log(`点击了: ${item}`);
  router.push({ name: item });
};
</script>

<style scoped>
.menu-container {
  list-style-type: none; /* 去掉默认列表项的小圆点 */
  padding: 0;
  margin: 0;
  width: 200px; /* 根据需求设置宽度 */
  position: fixed; /* 固定定位，使其一直在左边 */
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #f8f9fa; /* 设置背景颜色 */
  overflow: auto; /* 内容超出时显示滚动条 */
}
.menu-container li {
  padding: 8px 16px;
}
.menu-container li a {
  text-decoration: none; /* 去掉链接下划线 */
  color: #333; /* 设置文字颜色 */
}
</style>